<template>
  <div class="question-container">
    <!-- 顶部盒子 -->
    <div class="top-box">
      <!-- 下拉菜单 -->
      <van-dropdown-menu class="question-dropdown-menu">
        <van-dropdown-item ref="cityDropItem" class="city-drop">
          <template #title> <span>面试宝典</span>{{ city }}</template>
          <template >
            <van-index-bar :index-list="indexList">
              <!-- 索引列 遍历对象的时候,有value,key,item这三个参数,
              所以这里的value是直接可以用的 -->
              <template v-for="(value, key) in citys">
              <van-index-anchor :index="key" :key="key" />
              <van-cell
               v-for="item in value"
               @click="selectCity(item)"
                :title="item"
                 :key="item" />
              </template>
            </van-index-bar>
          </template>
        </van-dropdown-item>
      </van-dropdown-menu>
      <!-- 横向滚动的tags -->
      <div class="scroll-wrap" ref="scroll">
        <div class="content">
          <van-tag
            v-for="(item, index) in positionArr"
            :key="item.id"
            round
            :type="index === positionIndex ? 'primary' : ''"
            @click="positionIndex = index"
            >{{ item.name }}</van-tag
          >
        </div>
      </div>
    </div>
    <!-- 引导盒子 -->
    <div class="nav-box">
      <div class="item error">
        <i class="iconfont iconicon_mine_cuoti"></i>
        常错题库
      </div>
      <div class="item collect">
        <i class="iconfont iconicon_mine_tikushoucang"></i>
        收藏题库
      </div>
      <!-- 点击去企业 -->
      <div class="item company">
        <i class="iconfont iconicon_mine_qiyeshoucang"></i>
        企业题库
      </div>
      <div class="item answer">
        <i class="iconfont iconicon_mine_mianjing"></i>
        已答题库
      </div>
      <!-- 环形进度条 -->
      <van-circle
        v-model="currentRate"
        :rate="rate"
        :color="gradientColor"
        size="120"
        speed="100"
        :stroke-width="70"
        stroke-linecap="round"
        layer-color="transparent"
      >
        <template>
          <div class="circle-bg">
            <h2>顺序刷题</h2>
            <span>
    {{ userInfo.correctQuestions.length }}/{{ totalCount.toFixed()}}
            </span>
          </div>
        </template>
      </van-circle>
    </div>
    <!-- 计数盒子 -->
    <div class="num-box">
      <h2>累计收录</h2>
      <span>{{ totalCount.toFixed() }}</span>
    </div>
    <!-- 开始按钮 -->
    <van-button class="question-button" type="default">模拟面试</van-button>
  </div>
</template>

<script>
// 导入接口
import { getFilters } from '../../api/question'
// mapState
import { mapState } from 'vuex'
// 导入过渡动画的模块
import gsap from 'gsap'
export default {
  name: 'question',
  data () {
    return {
      currentRate: 0,
      rate: 0,
      gradientColor: {
        '0%': '#e40137ad',
        '100%': '#E40137'
      },
      value1: false,
      // 城市对应的职位信息
      cityPositions: undefined,
      // 城市的索引信息
      citys: undefined,
      // 总个数
      totalCount: 0,
      // 右侧索引
      indexList: [],
      // 遍历的职位信息
      positionArr: [],
      // 选择的职位索引 高亮的那个
      positionIndex: 0,
      // chegnshi
      city: '全国'
    }
  },
  created () {
    this.$toast.loading()
    getFilters().then(res => {
      this.cityPositions = res.data.data.cityPositions
      this.citys = res.data.data.citys
      // 先把这个干掉,因为添加动画的时候,有一个新生成的数据
      // this.totalCount = res.data.data.totalCount
      // 获取citys的所有key 设置给indexList
      this.indexList = Object.keys(this.citys)
      // 设置遍历的职位数组 ,里面有一个默认值
      this.positionArr = this.cityPositions['全国']
      // 增加过度效果
      gsap.to(this.$data, { duration: 1, totalCount: res.data.data.totalCount })
    })
  },
  // 计算属性
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    selectCity (city) {
      // 保存城市
      this.city = city
      // 收起菜单选项
      this.$refs.cityDropItem.toggle()
      // 重新生成遍历的职位
      this.positionArr = this.cityPositions[this.city]
      // 索引还原到0
      this.positionIndex = 0
    }
  }
}
</script>

<style lang="less">
.question-container {
  // 顶部盒子
  .top-box {
    background-color: @white-color;
    box-shadow: 0 0.05333rem 0.32rem rgba(100, 101, 102, 0.08);
  }
  // 下拉菜单
  .question-dropdown-menu {
    // 顶部 中间
    .van-ellipsis {
      font-size: 12px;
      color: @subdominant-font-color;
      span {
        font-size: 18px;
        margin: 5px;
        color: @main-font-color;
      }
    }
    // 下箭头
    .van-dropdown-menu__title {
      &::after {
        border-color: transparent transparent @main-color @main-color;
      }
    }
    // 阴影
    .van-dropdown-menu__bar {
      box-shadow: none;
    }
    .city-drop {
      .van-index-anchor {
        transform: translateY(-1px);
        font-size: 12px;
        color: @minor-font-color;
        background-color: @border-color;
      }
    }
  }
  // 横向滚动 tags
  .scroll-wrap {
    width: 100%;
    overflow-x: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    .content {
      box-sizing: border-box;
      padding: 15px;
      display: flex;
      height: 59px;
      .van-tag {
        padding: 6px 12px;
        flex-shrink: 0;
        margin-right: 10px;
        background: @border-color;
        color: @subdominant-font-color;
      }
      .van-tag--primary {
        background: @assist-color;
        color: @white-color;
      }
    }
  }
  // 引导盒子
  .nav-box {
    height: 200px;
    margin-top: 15px;
    background-color: @white-color;
    position: relative;
    .item {
      position: absolute;
      font-size: 12px;
      color: @subdominant-font-color;
      .iconfont {
        color: @white-color;
        display: block;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        text-align: center;
        line-height: 44px;
        font-size: 24px;
        margin-bottom: 7px;
      }
      &.error {
        top: 20px;
        left: 42px;
        .iconfont {
          background: linear-gradient(#ff8080, #ff4949);
        }
      }
      &.collect {
        top: 20px;
        right: 42px;
        .iconfont {
          background: linear-gradient(#ffda05, #ffb302);
        }
      }
      &.company {
        bottom: 20px;
        left: 42px;
        .iconfont {
          background: linear-gradient(#00ddec, #00b8d4);
        }
      }
      &.answer {
        bottom: 20px;
        right: 42px;
        .iconfont {
          background: linear-gradient(#3ee5b1, #1dc779);
        }
      }
    }
    .van-circle {
      position: absolute;
      width: 112px;
      height: 112px;
      display: flex;
      align-items: center;
      justify-content: center;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .van-circle::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-image: url('../../assets/circleBg.png');
      background-size: 100%;
    }
    .circle-bg {
      width: 100px;
      box-sizing: border-box;
      height: 100px;
      border-radius: 50%;
      background: linear-gradient(#ff6f92, #e40137);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 20px 0;
      h2 {
        /* color: orange; */
        margin: 0;
        color: @white-color;
        font-size: 16px;
      }
      span {
        color: @white-color;
        font-size: 16px;
      }
    }
  }
  .num-box {
    height: 130px;
    background: @white-color;
    font-size: 18px;
    text-align: center;
    padding-top: 21px;
    margin-top: 20px;
    h2 {
      margin: 0;
      margin-bottom: 21px;
    }
    span {
      font-size: 30px;
    }
  }
  .question-button {
    width: 345px;
    height: 50px;
    background: @assist-color;
    border-radius: 7px;
    color: @white-color;
    margin: 15px auto;
    display: block;
  }
  .content .van-tag {
    // opacity: 0;
    transition: all 0.5s;
  }
  // 动画
  .content .van-tag.animated {
    opacity: 1;
  }
}
</style>
